<template>
    <div id="login">
        <div id="bgd">
            <canvas id='myCanvas'>
            </canvas>
        </div>
        <div id="loginBox">
            <div class="g_pic" align="center">
                <img src="../../assets/picture/EPS.png" style="height: 70px;width: 70px"/>
            </div>
            <div align="center" style="color: #07eed2">社区防疫&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人人有责</div>
            <div align="center" style="font-size: 25px">注册</div>
            <el-form ref="UserFormRef" :model="UserForm" :rules="UserRules" class="user_form" label-width="0px">
                <el-form-item prop="uname" class="inps">
                    <el-input v-model="UserForm.uname" prefix-icon="iconfont icon-yonghutubiao"></el-input>
                </el-form-item>
                <el-form-item prop="password" class="inps">
                    <el-input type="password" v-model="UserForm.password"
                              prefix-icon="iconfont icon-mima" show-password></el-input>
                </el-form-item>

                <el-form-item class="btns" align="center">
                    <!--@click="register = true"--><!--更改开启滑块验证-->
                    <el-button type="primary" style="border:none" class="submitBtn" @click="Register()">注册</el-button>
                    <el-dialog
                            title="提示"
                            :visible.sync="register"
                            width="30%">
                        <div class="verification-slide">
                            <slide-verify
                                    :l="42"
                                    :r="10"
                                    :w="360"
                                    :h="155"
                                    :accuracy ='4'
                                    slider-text="拖动左边滑块完成上方拼图"
                                    @success="onSuccess"
                                    @fail="onFail">
                            </slide-verify>
                        </div>
                    </el-dialog>
                    <el-button type="info" class="submitBtn" style="border:none" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { mapMutations } from 'vuex';
    export default {
        data() {
            return {
                UserForm: {
                    /*name: "用户名",
                    number: "密码",*/
                    uid:"",
                    userID:"",
                    uname: "",
                    password: "",
                },
                register: false,
                User:null,
                userToken: '',
                UserRules: {
                    uname: [{
                        required: true,
                        message: '用户名为必填项',
                        trigger: 'blur'
                    },
                        {
                            min: 2,
                            max: 8,
                            message: '长度在 2 到 8 个字符',
                            trigger: 'blur'
                        }
                    ],
                    password: [{
                        required: true,
                        message: '密码为必填项',
                        trigger: 'blur'
                    },
                    ],
                }
            };
        },
        methods: {
            resetForm: function () {
                this.$refs.UserFormRef.resetFields();
            },
            onSuccess() {
                console.log('滑块验证通过');
                this.register = false;
                this.Register();
            },
            onFail() {
                console.log('滑块验证不通过')
            },
            ...mapMutations(['changeLogin']),
            Register() {
                let _this = this;
                this.$refs.UserFormRef.validate(async valid => {
                    console.log(this.UserForm);
                    console.log(valid);
                    if (!valid) return;
                    const {data: res} = await this.$http.post("register", this.UserForm);
                    this.UserForm = res.User;
                    console.log(res);
                    if (res.flag === "ok") {
                        window.sessionStorage.setItem('username', this.UserForm.uname);
                        window.sessionStorage.setItem('password', this.UserForm.password);
                        this.$message.success("成功");
                        _this.userToken = 'Bearer ' + res.token;
                        _this.changeLogin({Authorization: _this.userToken});
                        window.sessionStorage.setItem("token", res.token);
                        window.sessionStorage.setItem('UUID', this.UserForm.userID);
                        window.sessionStorage.setItem("uid",this.UserForm.uid);
                        await this.$router.push({path: "/ESP"});
                        console.log(res.User);
                        console.log(res.token);
                    } else {
                        this.$message.error("失败");
                        await this.$router.push({path: "/404"});
                        await this.$router.push({path: "/login"})
                    }
                });
            },
            //重复动画
            drawFrame() {
                let animation = requestAnimationFrame(this.drawFrame);
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.createStar(false);
                this.stars.forEach(this.moveStar);
            },
        }
    };
</script>

<style lang='less' scoped>
    #login {
        width: 100vw;
        padding: 0;
        margin: 0;
        height: 100vh;
        font-size: 16px;
        background-repeat: no-repeat;
        background-position: left top;
        background-color: #242645;
        color: #fff;
        background-size: 100%;
        background-image: url(../../assets/picture/bj.png);
        position: relative;

        #bgd {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }

        #loginBox {
            width: 400px;
            height: 320px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding: 50px 40px 40px 40px;
            box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
            opacity: 1;
            background: linear-gradient(230deg,
            rgba(53, 57, 74, 0) 0%,
            rgb(0, 0, 0) 100%);

            /deep/ .inps input {
                border: none;
                color: #fff;
                background-color: transparent;
                font-size: 18px;
            }

            .submitBtn {
                background-color: transparent;
                color: #39f;
                width: 100px;
            }

            .iconfont {
                color: #fff;
            }
        }
    }

    .user_form {
        padding: 0 20px;
    }
</style>
